You are here
Google API Javascript Web API 

GoogleMaps API to Draw a line From A to B Direction

Arjun JS , , ,

To make Google maps API to Draw a line From One Place to Another Direction.

Step1: Add the below Google maps API link to your page

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

 

Step 2: Add the below HTML Div to body

 <div style="width: 600px;">
         <div id="map" style="width: 800px; height: 600px; float: left;"></div> 
       </div>

Step 3: Then you have to configure Javascript code based on your Requirement.

 var directionsService = new google.maps.DirectionsService();
         var directionsDisplay = new google.maps.DirectionsRenderer();
    
         var map = new google.maps.Map(document.getElementById('map'), {
           zoom:7,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         });
        
         directionsDisplay.setMap(map);
    
         var request = {
           origin: '13.315616, 75.774851', 
           destination: '12.971606, 77.592682',
           travelMode: google.maps.DirectionsTravelMode.DRIVING
         };
    
         directionsService.route(request, function(response, status) {
           if (status == google.maps.DirectionsStatus.OK) {
             directionsDisplay.setDirections(response);
           }
         });

 

Also Read:  Javascript errors you should be aware of

Related posts